<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">
    <title th:text="${'LEMON-'+tag}"></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
</head>

<body>
<div class="blog-masthead">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                            data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/index}">首 页</a>
                </div>
                <div id="bs-navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a th:href="@{/interview}" class="blog-nav-item">面试那些事</a></li>
                        <li><a th:href="@{/timeTravel}" class="blog-nav-item">时间旅行</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li th:if="${session?.loginUser}==null">
                            <a th:href="@{/login}">登录</a>
                        </li>
                        <li th:if="${session?.loginUser}==null">
                            <a th:href="@{/register}">注册</a>
                        </li>
                        <li class="dropdown hidden-xs" th:if="${session?.loginUser}!=null">
                            <a href="#" class="blog-nav-img" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">
                                <img th:src="${session?.loginUser?.photo ne null}?
                                ${session?.loginUser?.photo}:@{/images/icon-user.png}"
                                     alt="头像" class="img-circle picture shadow">
                            </a>
                            <ul class="dropdown-menu">
                                <li><a th:href="@{'/dynamic/'+${session?.loginUser?.id}}">我的动态</a></li>
                                <li><a th:href="@{'/mydata/'+${session?.loginUser.id}}">我的资料</a></li>
                                <li><a th:href="@{/issue}">发布文章</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a th:href="@{/logout}">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="blog-main">
    <div class="container">
        <h2 class="text-center" style="letter-spacing:10px;" th:text="${tag}"></h2>
        <h4 class="text-center"><small>一共<b
                th:text="${articleList.size()}">123</b>篇文章</small>&nbsp;&nbsp;<small>被收藏<b>0</b>次</small></h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="blog-post" th:if="${articleList}!=null">
                    <div class="blog-content" th:each="article:${articleList}">
                        <div class="media">
                            <div class="media-body">
                                <h4 class="media-heading"><a th:href="@{'/article/'+${article?.id}}"
                                                             class="article_title" th:text="${article?.title}">标题</a>
                                </h4>
                                <p class="media-item">
                                    <span th:text="${article?.author}">作者</span>
                                    <span th:text="${article?.putime}">时间</span></p>
                                <p class="media-item">
                                    <span class="glyphicon glyphicon-heart" th:text="${article?.collects}">评论数</span>
                                    <span class="glyphicon glyphicon-comment"
                                          th:text="${article?.comments}">收藏数</span>
                                    <span class="glyphicon glyphicon-eye-open" th:text="${article?.views}">浏览数</span>
                                </p>
                            </div>
                            <div class="media-right">
                                <a href="#">
                                    <img class="media-object" alt="图片"
                                         th:src="${article?.cover}">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="blog-footer">
    <p>青柠的博客</p>
    <p>
        <a href="#">返回顶部</a>
    </p>
</footer>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</body>

</html>